﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>瀑布流布局列表页</title>
    <style type="text/css">
        * {margin: 0;padding: 0;list-style-type: none;}
        a, img {border: 0;}
        body {background: #FFF;font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";}
        /* lxf-box */
        #lxf-box {position: relative;width: 748px;margin: 0 auto;}
        #lxf-box a {display: block;width: 233px;background: #fff;text-decoration: none;}
        #lxf-box li {position: absolute;text-align: center;left: 0px;top: 0;width: 233px;height: 205px;padding-right: 7px; padding-bottom: 4px;border: 1px solid #ccc;}
        #lxf-box li {-webkit-transition: all .7s ease-out .1s;-moz-transition: all .7s ease-out;-o-transition: all .7s ease-out .1s;transition: all .7s ease-out .1s; }
        #lxf-box img {display: block;border: 0;margin: 0 auto; margin-bottom: 15px; }
        #lxf-box li a img { margin-left: 7px;margin-top: 7px;}
        .title {display: block;font-size: 16px;color: #000;height: 20px;line-height: 20px;width: 200px;cursor: pointer;padding-left: 15px;font-weight: bolder;text-align: left;
                overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
        }
        #lxf-box span {display: block;color: #606060; margin: 10px;height: 20px;font-weight: normal;font-size: 12px;}
    </style>
    <script src="http://hsjdtech.com/inter/scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
           // getPotatoHarm(potatoTreeParam);
            liuxiaofan();
        });
        function getPotatoHarm(potatoTreeParam) {
            $.post("../../DataCenter.ashx",
            {
                method: "getPotatoHarm",
                structureType: potatoTreeParam
            }, function (data, textStu) {
                var d = eval(data);
                var str = "";
                for (var i = d.length; i < 30; i++) {
                    $("#cs" + (i + 1).toString()).css("display","none");
                }
                for (var i = 0; i < d.length; i++) {
                    str = "<a href=\"flowerDetail.htm?id=" + d[i]["ID"] + "\"><img src=\"../../admin/LateBlight/LateBlight/NewsImg/" + d[i]["picUrl"] + "\" width=\"225\" height=\"225\" alt=\"\"/>\
                              <span class=\"title\" onclick=\"\"><b>" + d[i]["harmName"] + "</b></span>\
                              </a>";
                    $("#cs"+(i+1).toString()).html(str);
                }
                var height = parseInt (d.length / 3) * 280;
                if (d.length % 3 != 0) { height += 280; } 
                alert(height);
                window.parent.firstPageIframHeight(height + 100);
            });
        }
    </script>
</head>
<body>
    <ul id="lxf-box"  class="main">
        <li><a href="#"><img src="http://hsjdtech.com/inter/images/img/img.jpg" width="225" height="165" alt=""/><span class="title"><b>Demo</b></span></a></li>
        <li><a href="#"><img src="http://hsjdtech.com/inter/images/img/img.jpg" width="225" height="165" alt=""/><span class="title"><b>Demo</b></span></a></li>
        <li><a href="#"><img src="http://hsjdtech.com/inter/images/img/img.jpg" width="225" height="165" alt=""/><span class="title"><b>Demo</b></span></a></li>
        <li><a href="#"><img src="http://hsjdtech.com/inter/images/img/img.jpg" width="225" height="165" alt=""/><span class="title"><b>Demo</b></span></a></li>
        <li><a href="#"><img src="http://hsjdtech.com/inter/images/img/img.jpg" width="225" height="165" alt=""/><span class="title"><b>Demo</b></span></a></li>
        <li><a href="#"><img src="http://hsjdtech.com/inter/images/img/img.jpg" width="225" height="165" alt=""/><span class="title"><b>Demo</b></span></a></li>
        <li id="cs1" >        </li>
        <li id="cs2" >        </li>
        <li id="cs3" >        </li>
        <li id="cs4" >        </li>
        <li id="cs5" >        </li>
        <li id="cs6" >        </li>
        <li id="cs7" >        </li>
        <li id="cs8" >        </li>
        <li id="cs9" >        </li>
        <li id="cs10">        </li>
        <li id="cs11" >         </li>
        <li id="cs12" >        </li>
        <li id="cs13" >        </li>
        <li id="cs14" >        </li>
        <li id="cs15" >        </li>
        <li id="cs16" >        </li>
        <li id="cs17" >        </li>
        <li id="cs18" >        </li>
        <li id="cs19" >        </li>
        <li id="cs20">        </li>
        <li id="cs21" >         </li>
        <li id="cs22" >        </li>
        <li id="cs23" >        </li>
        <li id="cs24" >        </li>
        <li id="cs25" >        </li>
        <li id="cs26" >        </li>
        <li id="cs27" >        </li>
        <li id="cs28" >        </li>
        <li id="cs29" >        </li>
        <li id="cs30">        </li>
    </ul>
    <script type="text/javascript">
        /*
        原理：1.把所有的li的高度值放到数组里面
             2.第一行的top都为0
             3.计算高度值最小的值是哪个li
             4.把接下来的li放到那个li的下面
        编写时间：2012年6月9日
        */
        var margin = 10;//这里设置间距
        var li = $("li");//这里是区块名称
        var li_W = li[0].offsetWidth + margin;//取区块的实际宽度（包含间距，这里使用源生的offsetWidth函数，不适用jQuery的width()函数是因为它不能取得实际宽度，例如元素内有pandding就不行了）
        function liuxiaofan() {//定义成函数便于调用
            var h = [];//记录区块高度的数组
            var n = 3//窗口的宽度除以区块宽度就是一行能放几个区块
            
            for (var i = 0; i < li.length; i++) {//有多少个li就循环多少次
                li_H = li[i].offsetHeight;//获取每个li的高度
                if (i < n) {//n是一行最多的li，所以小于n就是第一行了
                    h[i] = li_H;//把每个li放到数组里面
                    li.eq(i).css("top", 0);//第一行的Li的top值为0
                    li.eq(i).css("left", i * li_W);//第i个li的左坐标就是i*li的宽度
                }
                else {
                    min_H = Math.min.apply(null, h);//取得数组中的最小值，区块中高度值最小的那个
                    minKey = getarraykey(h, min_H);//最小的值对应的指针
                    h[minKey] += li_H + margin;//加上新高度后更新高度值
                    li.eq(i).css("top", min_H + margin);//先得到高度最小的Li，然后把接下来的li放到它的下面
                    li.eq(i).css("left", minKey * li_W);	//第i个li的左坐标就是i*li的宽度
                }

            }
        }
        /* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */
        function getarraykey(s, v) { for (k in s) { if (s[k] == v) { return k; } } }
        /*这里一定要用onload，因为图片不加载完就不知道高度值*/
        //window.onload = function () {  
        //    //var t = setTimeout(liuxiaofan(), 5000);
        //    liuxiaofan();
        //};
        /*浏览器窗口改变时也运行函数*/
      // window.onresize = function () { liuxiaofan(); };
    </script>

</body>
</html>
